<template>
    <div>
        <ckeditor :editor="editor" v-model="editorData" @ready="onReady" :config="editorConfig" @input="onEditorInput">
        </ckeditor>
    </div>
</template>

<script>
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
import AxiosUploadAdapter from './AxiosUploadAdapter'
import "@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js";
export default {
    name: 'edictor',
    data() {
        return {
            editor: DecoupledEditor,
            editorData: '',
            editorConfig: {
                language: 'zh-cn',
                // 工具栏配置
                toolbar: {
                    items: [
                        'heading', '|',
                        'bold', 'italic', 'underline', 'strikethrough', '|',
                        'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
                        'link', 'bulletedList', 'numberedList', '|',
                        'alignment', '|',
                        'indent', 'outdent', '|',
                        'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', '|',
                        'undo', 'redo'
                    ],
                    shouldNotGroupWhenFull: true
                },
                // 图片和表格的额外配置
                image: {
                    toolbar: [
                        'toggleImageCaption', 'imageTextAlternative',
                        'imageStyle:inline', 'imageStyle:alignLeft', 'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:alignBlockLeft', 'imageStyle:alignBlockRight', 'imageStyle:block', 'imageStyle:side', 'imageStyle:wrapText', 'imageStyle:breakText', '|', 'insertImage', 'imageInsert', 'toggleImageCaption', 'resizeImage:original', 'resizeImage:25', 'resizeImage:50', 'resizeImage:75', 'resizeImage', 'imageResize', 'imageStyle:inline',
                        'imageTextAlternative'
                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn', 'tableRow', 'mergeTableCells'
                    ]
                },
                // 字体大小和样式配置
                fontSize: {
                    options: [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36]
                },
                fontFamily: {
                    options: [
                        'default', 'Arial, Helvetica, sans-serif', 'Courier New, Courier, monospace',
                        'Georgia, serif', 'Lucida Sans Unicode, Lucida Grande, sans-serif',
                        'Tahoma, Geneva, sans-serif', 'Times New Roman, Times, serif',
                        'Trebuchet MS, Helvetica, sans-serif', 'Verdana, Geneva, sans-serif'
                    ]
                },
                fontColor: {
                    colors: [
                        { color: 'hsl(0, 0%, 0%)', label: 'Black' },
                        { color: 'hsl(0, 0%, 30%)', label: 'Dim grey' },
                        { color: 'hsl(0, 0%, 60%)', label: 'Grey' },
                        { color: 'hsl(0, 0%, 90%)', label: 'Light grey' },
                        // 更多颜色...
                    ]
                },
                fontBackgroundColor: {
                    colors: [
                        { color: 'hsl(0, 75%, 60%)', label: 'Red' },
                        { color: 'hsl(30, 75%, 60%)', label: 'Orange' },
                        { color: 'hsl(60, 75%, 60%)', label: 'Yellow' },
                        { color: 'hsl(90, 75%, 60%)', label: 'Light green' },
                        // 更多颜色...
                    ]
                },
            }
        };
    },
    // beforeDestroy() {
    //     if (this.editor) {
    //         console.log(this.editor)
    //         this.editor.destroy();
    //     }
    // },
    methods: {
        onReady(editor) {
            
            // 自定义上传图片插件
            editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
                return new AxiosUploadAdapter(loader);
            }
            // // Insert the toolbar before the editable area.
            editor.ui.getEditableElement().parentElement.insertBefore(
                editor.ui.view.toolbar.element,
                editor.ui.getEditableElement()
            );
        },
        onEditorInput(e){
            this.$emit('updataValue', e);
            // console.log(e)
        }
    }
}
</script>
<style lang="scss">

// 编辑器高度，边框
.ck-content {
    min-height: 400px;
    border: 1px solid #ccc !important;
    background-color: white;
}
</style>